<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-bind</h1>
    <hr>
    <div id="app">
        <img v-bind:src="imgSrc" alt="" width="200px">
        <hr>
        <div :class="className">绑定css样式</div>
        <div :class="{classA:isOk}">绑定class中的判断</div>
        <div :class="[classA,classB]">绑定class中的数组</div>
        <div :class="isOk?classA:classB">绑定class中的三元表达式判断</div>
        <button @click="dianji">点击我变化</button>

        <div :style="{color:red,fontSize:font}">绑定style</div>

        <div :style="styleObject">用对象绑定style样式</div>
    </div>
    
</body>
<style>
    .classA{
        color: red;
    }
    .classB{
        font-size: 36px;
    }
</style>
<script>
    var app = new Vue({
        el:"#app",
        data:{ 
            imgSrc:'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4044544193,1374656662&fm=173&app=25&f=JPEG?w=218&h=146&s=0332748260A21EAD76B9D13603005002',
            className:'classA',
            isOk:true,
            classA:'classA',
            classB:'classB',
            red:'green',
            font:"50px",
            styleObject:{
                color:"#ff6600",
                fontSize:"32px"
            }
        },
        methods:{
            dianji:function(){
                return this.isOk=!this.isOk
            }
        }
    })
</script>
</html>